<template>
  <div class="search_container">
    <div class="search_container__header">
      <div class="search_container__header__left iconfont" @click="toBack">
        &#xe84f;
      </div>
      <div class="search_container__header__right">
        <input
          type="text"
          placeholder="这是一个搜索框111"
          class="search_container__header__right__ipt"
          @keyup.enter="toSearch"
          v-model="searchValue"
        />
        <van-button
          type="warning"
          class="search_container__header__right__btn"
          @click="toSearch"
          >搜索</van-button
        >
      </div>
    </div>
    <div class="search_container__content">
      <div class="search_container__content__history">
        <div class="search_container__content__history__top">
          <h2 class="search_container__content__history__top__left">
            历史搜索
          </h2>
          <div
            class="search_container__content__history__top__right iconfont"
            @click="clearHistory"
          >
            &#xe718;
          </div>
        </div>
        <div class="search_container__content__history__content">
          <div
            class="search_container__content__history__content__items"
            v-for="(item, index) of searchValueList"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="search_container__content__guest">
        <div class="search_container__content__guest__top">
          <h2 class="search_container__content__guest__top__left">猜你想搜</h2>
          <div
            class="search_container__content__guest__top__right iconfont"
            @click="toShowSearchList"
            v-if="isSearchShow"
          >
            &#xebcc;
          </div>
          <div
            class="search_container__content__guest__top__right iconfont"
            @click="toShowSearchList"
            v-else
          >
            &#xe9cf;
          </div>
        </div>
        <div
          class="search_container__content__guest__content"
          v-if="isSearchShow"
        >
          <div class="search_container__content__guest__content__items">
            阿斯顿噶
          </div>
          <div class="search_container__content__guest__content__items">
            4564123456
          </div>
          <div class="search_container__content__guest__content__items">
            asdgsdfg
          </div>
          <div class="search_container__content__guest__content__items">
            45641阿斯顿噶发23456asdfgasdg
          </div>
        </div>
        <div class="search_container__content__guest__noContent" v-else>
          信息记录已隐藏
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useBackRouterEffect } from "../components/effects/backEffect";
import storage from "../utils/storage";
const toBack = useBackRouterEffect();
const isSearchShow = ref(true);
let searchValueList = reactive(
  storage.getItem("history") ? storage.getItem("history") : []
);
const searchValue = ref("");
function toSearch() {
  searchValueList.unshift(searchValue.value);
  storage.setItem("history", searchValueList);
  searchValue.value = "";
}
const toShowSearchList = () => {
  if (isSearchShow.value) {
    isSearchShow.value = false;
  } else {
    isSearchShow.value = true;
  }
};
function clearHistory() {
  storage.clearItem("history");
  searchValueList = [];
}
</script>
<style lang="scss" scoped>
.search_container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  &__header {
    width: 414rem;
    height: 104rem;
    box-sizing: border-box;
    background-color: #6481da;
    display: flex;
    padding: 10rem 10rem;
    flex-grow: 1;
    padding-top: 44rem;
    align-items: center;
    &__left {
      margin-right: 40rem;
      font-size: 18rem;
      color: #fff;
    }
    &__right {
      width: 300rem;
      display: flex;
      padding: 0 10rem;
      height: 30rem;
      background-color: #ffffff;
      border-radius: 5rem;
      align-items: center;
      justify-content: space-between;
      &__ipt {
        width: 200rem;
        height: 30rem;
        font-size: 16rem;
        &::placeholder {
          font-size: 15rem;
          letter-spacing: 1rem;
        }
      }
      &__btn {
        width: 60rem;
        height: 25rem;
        font-size: 16rem;
        padding: 0;
      }
    }
  }
  &__content {
    width: 414rem;
    border-top-right-radius: 10rem;
    border-top-left-radius: 10rem;
    margin-top: -10rem;
    padding: 5rem;
    box-sizing: border-box;
    background-color: #fff;
    &__history {
      width: 100%;
      overflow: hidden;
      padding: 10rem;
      box-sizing: border-box;
      &__top {
        margin: 10rem 5rem;
        display: flex;
        justify-content: space-between;
        &__right {
          font-size: 20rem;
        }
      }
      &__content {
        display: flex;
        flex-wrap: wrap;
        width: 384rem;
        &__items {
          padding: 3rem;
          height: 20rem;
          background-color: #efefef;
          border-radius: 5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 5rem;
        }
      }
    }
    &__guest {
      width: 100%;
      height: 130rem;
      overflow: hidden;
      padding: 10rem;
      box-sizing: border-box;
      &__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10rem 5rem;
        &__right {
          font-size: 20rem;
        }
      }
      &__content {
        display: flex;
        flex-wrap: wrap;
        padding: 5rem;
        &__items {
          width: 165rem;
          margin: 3rem 10rem;
          font-size: 16rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      &__noContent {
        font-size: 16rem;
        color: #727272;
        text-align: center;
      }
    }
  }
}
</style>
